<template>
  <MainHeader
    @inputChange="inputChange"
    placeholder="搜索直播间名称、主播名称、房间号等……"
    title="直播间"
  ></MainHeader>

  <CreateBtn />

  <el-table :data="LiveInfo" empty-text="当前没有数据">
    <el-table-column label="最近开播" width="200">
      <template #default="scope">
        <div class="date">
          <!-- 日期转换 -->
          <div class="day">{{ formatDay(scope.row.start_time) }}</div>
          <div class="start-end">
            {{ formatStartOrEndTime(scope.row.start_time, scope.row.end_time) }}
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="直播间信息">
      <template #default="scope">
        <div class="product-wrapper">
          <img class="product-cover" :src="scope.row.feeds_img" alt="" />
          <div class="product-right">
            <div class="product">{{ scope.row.name }}</div>
            <div class="room-id">房间号：{{ scope.row.roomid }}</div>
            <div class="anchor_name">主播：{{ scope.row.anchor_name }}</div>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="直播状态" width="180">
      <template #default="scope">
        {{ liveStatus[scope.row.live_status] }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="toControl(scope.row)" type="text">控制台</el-button>
        <!-- <el-button type="text" :disabled="scope.row.live_status == 102"
          >编辑</el-button
        > -->
        <el-button
          @click="delLive(scope.row)"
          type="text"
          style="padding-left: 10px"
          >删除</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="开播码">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.IntroducingCode"
          :preview-src-list="srcList"
        >
        </el-image>
      </template>

      <!-- <img class="liveImg" src="~img/livexiao.png" alt="" /> -->
    </el-table-column>
  </el-table>
  <div class="block-pagination">
    <el-pagination
      background
      @current-change="handleCurrentChange"
      v-model:currentPage="currentPage"
      :page-size="100"
      layout="prev, pager, next, jumper"
      :total="totalPage"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, inject } from 'vue'
import { getLiveInfo, DeleteRoom } from '@/service/main/main'
import { liveStatus } from '../config/liveStatus'
import { MainHeader } from '@/components/main-header/index'
import { formatDay, formatStartOrEndTime } from '../config/time.config'
import router from '@/router'

import CreateBtn from './CreateBtn.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default defineComponent({
  components: { CreateBtn, MainHeader },
  props: {},
  async setup() {
    //刷新页面
    const reload: any = inject('reload')
    // 1.请求数据
    let pages = 10 //每页显示数量
    let currentPage = ref(1)
    let LiveInfoRes: any
    let LiveInfo = ref()
    let roomList: any
    let totalPage = ref(1)
    const liveResFun = async (currentPage = 1) => {
      LiveInfoRes = await getLiveInfo(currentPage - 1, pages)
      LiveInfo.value = LiveInfoRes.room_info
      roomList = LiveInfoRes.room_info
      totalPage.value = Math.ceil(LiveInfoRes.total / pages) * 100
    }

    liveResFun()

    // 分页事件
    const handleCurrentChange = async (val: any) => {
      currentPage.value = val
      liveResFun(val)
    }
    // 输入框改变
    let searchValue = ref('')

    const inputChange = (value: any) => {
      searchValue.value = value
      LiveInfo.value = roomList.filter((item: any) => {
        return (
          item.name.indexOf(value) !== -1 ||
          String(item.roomid).indexOf(value) !== -1 ||
          item.anchor_name.indexOf(value) !== -1
        )
      })
    }
    // 删除直播间
    const delLive = (event: any) => {
      const id = event.roomid
      ElMessageBox.confirm('此操作将永久删除直播间, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          ElMessage({
            type: 'success',
            message: '删除成功!',
          })
          DeleteRoom(id)
          // 刷新页面
          reload()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消删除',
          })
        })
    }

    // 跳转到控制台
    const toControl = (event: any) => {
      // router.push('/main/live-control')
      const { roomid } = event
      const { live_status } = event
      router.push({
        name: 'liveControl',
        query: {
          roomid,
          live_status,
        },
      })
    }

    const url = ref('../../../.././assets/img/livexiao.png')
    const srcList = ref([
      'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
    ])
    return {
      LiveInfo,
      totalPage,
      searchValue,
      currentPage,
      liveStatus,
      url,
      srcList,
      formatDay,
      formatStartOrEndTime,
      inputChange,
      handleCurrentChange,
      delLive,
      toControl,
    }
  },
})
</script>

<style scoped lang="less">
.liveImg {
  width: 88px;
  height: 88px;
}
// .liveImg:hover {
//   transform: scale(1.4);
//   z-index: 99;
// }
.product-number {
  font-size: 14px;
  color: #999;
  margin-bottom: 0.2rem;
}
.block-pagination {
  padding: 10px 20px;
}
.el-table {
  .date {
    .day {
      font-size: 0.24rem;
      margin-bottom: 0.1rem;
    }
  }

  .el-button {
    margin-right: 10px;
  }

  .product-wrapper {
    display: flex;
    align-items: center;

    .product-cover {
      width: 1rem;
      height: 1rem;
      margin-right: 0.2rem;

      img {
        width: 100%;
        border-radius: 5px;
      }
    }

    .product-right {
      .product {
        font-size: 0.18rem;
        margin-bottom: 0.1rem;
      }

      .room-id,
      .anchor_name {
        font-size: 0.14rem;
        color: #888;
      }
    }
  }

  .cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
</style>
